<template>
	<div class="location_container">
		<img src="https://mat1.gtimg.com/pingjs/ext2020/weather/2017/images/logo-c3cae1c3ef.png" />
		<div class="location">
			<!-- 城市详情 -->
			<div class="loca_info" @mouseenter="star" @mouseleave="leaveStar">
				<!-- 定位标志 -->
				<div class="location_icon"></div>
				<!-- 所在城市的名称以及其上一级行政区划的名称 -->
				<p v-if="location_info.adm1 !== location_info.lc_name">{{location_info.adm1}}</p>
				<p>{{location_info.lc_name}}</p>
				<!-- 关注的城市 -->
				<StarCity class="StarCity" :star_cities_list="star_cities_list" @switchCity="switchStar" v-show="StarActive"></StarCity>
			</div>
			<!-- 添加关注按钮 -->
			<a class="pay_attention" href="javascript:" @click="starIt">[添加关注]</a>
			<!-- 搜索框 -->
			<input 
				class="search_box" 
				@focus="inputing" 
				@click="inputing" 
				@blur="inputDone" 
				v-model="search_message" 
				placeholder="搜索市、区、县等" 
				type="text"
				onfocus=''/>
			<!-- 搜索结果容器 -->
			<div class="search_content" v-show="SearchContentActive">
				<!-- 当前定位信息 -->
				<div class="container" data-index=0>
					<p>当前定位</p>
					<ul class="present_position clearfix">
						<li @click="locate">{{presentPosition.position}}</li>
					</ul>
				</div>
				<!-- 历史记录（包括点击热门城市和搜索记录） -->
				<div class="container" data-index=1 v-show="history_list[0]">
					<p>历史记录</p>
					<ul class="history_cities clearfix">
						<li class="each_history" 
							@click="switchCity" 
							v-for="(item,index) in history_list" 
							:key="index"
							:data_id="item.id">{{item.name}}</li>
					</ul>
					<div class="delete" @click="deleteHistory" style="cursor: pointer;">清除</div>
				</div>
				<!-- 热门城市信息 -->
				<div class="container" data-index=2>
					<p>热门城市</p>
					<ul class="top_cities clearfix">
						<li class="each_top" 
							v-for="(item1, index1) in hot_cities" 
							:key="index1" 
							:data_id="item1.id"
							:index="index1"
							@click="switchCity">{{item1.name}}
						</li>
					</ul>
				</div>
			</div>
			<!-- 搜索返回的结果 -->
			<div class="search_result" v-show="resultActive">
				<ul>
					<!-- 当搜索没有返回正确结果或者没有输入文字的时候显示 -->
					<li v-show="!this.result_list[0]">请输入正确的市、县、区名</li>
					<!-- 当搜索返回正确结果了，将其渲染到返回结果中 -->
					<li class="result_list"
						v-for="(item,index) in result_list" 
						:key="index" 
						:data_id="item.id"
						:index="index"
						@click="switchCity">
						<!-- 当返回的adm1和adm2相同时如海淀区会返回北京北京海淀，则只显示北京，海淀 -->
						<!-- 若返回的adm2和name相同时如上海会返回上海上海上海，则只显示一个上海 -->
						{{item.adm1 == item.adm2 ? '' : item.adm1 + ','}}{{item.adm2 == item.name ? item.adm2 : item.adm2 + ',' + item.name}}
					</li>
				</ul>
				
			</div>
		</div>
	</div>
</template>

<script>
	// 引用关注城市组件
	import StarCity from "./StarCity.vue"
	
	export default {
		name: "UserLocation",
		components: {
			StarCity
		},
		data: function () {
			return {
				// 前三个是上面的标签是否显示的标志
				StarActive: 0,
				SearchContentActive: 0,
				resultActive: 0,
				
				star_cities_list: [], // 存放关注的城市的信息，并将其传递给子组件
				hot_cities: [], // 存放热门城市信息
				result_list: [], // 存放搜索返回结果信息
				history_list: [], // 存放搜索记录信息
				search_message: '' // 存放搜索输入的文字
			}
		},
		props: {
			// 接收来自父组件的信息
			location_info: Object, // 选中城市的信息
			presentPosition: Object, // 当前定位城市信息
			todayData: Object // 选中城市的当天天气信息,当点击关注城市时会放入到star_cities_list中
		},
		watch: {
			// 监测搜索框中数据变化
			search_message () {
				// 每次信息发生变化都要重启计时器
				if (this.timer) {
					clearTimeout(this.timer)
				}
				// 当输入的信息为空时，清空先前获得的数据，隐藏搜索结果框，显示当前定位等
				if (!this.search_message) {
					this.result_list = [];
					this.SearchContentActive = 1;
					this.resultActive = 0;
				} else {
					// 如果搜索信息不为空，请求数据则显示返回的数据
					// 设置定时器，防抖，在确认用户输入停顿时请求数据，不用用户每输入一个字就发送一次请求
					this.timer = setTimeout(() => {
						this.$axios
							.get('https://geoapi.heweather.net/v2/city/lookup?key=4f1744b1ba5b47ab8b0a893374efa8ca&number=3&range=cn&location=' + this.search_message)
							.then(res => {
								console.log(res)
								if (res.data.code == "200") {
									this.result_list = res.data.location;
								} else {
									this.result_list = [];
								}
							})
					},500)
					this.SearchContentActive = 0;
					this.resultActive = 1;
				}
			}
		},
		methods: {
			// 当鼠标移入城市详情处时，显示关注的城市，若同时搜索详情框显示，隐藏详情框
			star: function () {
				this.StarActive = 1;
				this.SearchContentActive = 0;
			},
			// 当鼠标离开城市详情处时，隐藏关注的城市
			leaveStar: function () {
				this.StarActive = 0;
			},
			// 当鼠标点击搜索框时，显示搜索详情框
			inputing: function () {
				this.SearchContentActive = 1;
			},
			// 当鼠标离开搜索框时隐藏
			inputDone: function () {
				setTimeout(()=>{
					this.SearchContentActive = 0;
					this.resultActive = 0;
					this.search_message = '';
				},200);
			},
			// 当点击关注的城市，捕获子组件中的点击事件，并从子组件中获取到触发事件的标签对应的城市id值
			// 将该城市的id值传递给父级组件，进行全局当前城市id的更新
			switchStar: function (e) {
				this.$store.commit('updateCityId',e);
				// this.$emit("upDateCityId",e);
			},
			// 当点击搜索历史中的标签时，获取出发时间的标签对应的城市id值
			// 将id传递给父级组件并进行全局id更新
			switchCity: function (e) {
				console.log(e)
				// 得到被点击的标签的id值
				let id = e.currentTarget.getAttribute("data_id");
				if(e.currentTarget.getAttribute("index")) {
					let index = e.currentTarget.getAttribute("index");
					// 去除掉原有数组中和当前获取的数据有相同id的城市信息，防止重复添加
					this.history_list = this.history_list.filter(item => {
						return item.id != id;
					});
					// 判断是在热门城市中点击的或者是在搜索结果中点击的
					if(e.currentTarget.className === "each_top") {
						// 如果是在热门城市中点击的从热门城市列表中获取对应城市信息
						this.history_list.push(this.hot_cities[index]);
					} else {
						// 如果是在搜索结果中点击的从搜索结果列表中获取对应城市信息
						this.history_list.push(this.result_list[index]);
					}
					this.SearchContentActive = 1;
					this.resultActive = 0;
					// 完成获取信息之后，清空搜索框
					this.search_message = "";
				}
				// 将获取到的id更新到父级组件中，父级组件会根据id更新对应的信息
				this.$store.commit('updateCityId',id);
				// this.$emit("upDateCityId",id)
			},
			locate: function () {
				this.$store.commit('updateCityId',this.presentPosition.id);
				// this.$emit("upDateCityId",this.presentPosition.id)
			},
			// 当点击“添加关注”时，发送请求，得到天气详情并将其传递给StarCity组件进行渲染
			starIt: function () {
				// let id = this.$props.todayData.id;
				let id = this.$store.state.cityId;
				console.log(id)
				this.star_cities_list = this.star_cities_list.filter(function(item) {
					return item.id !== id;
				})
				this.star_cities_list.push(this.$props.todayData)
			},
			// 删除搜索历史
			deleteHistory: function () {
				this.history_list = [];
			}
		},
		mounted:function () {
			// 获取热门城市列表
			this.$axios
				.get('https://geoapi.heweather.net/v2/city/top?key=4f1744b1ba5b47ab8b0a893374efa8ca&number=20')
				.then(res => {
					this.hot_cities = res.data.topCityList;
				})
		}
	}
</script>

<style lang="less">
	.location_container {
		position: relative;
		height: 64px;
		width: 1200px;
		margin: 0 auto;
		vertical-align: middle;
		z-index: 2;
		img {
			position: absolute;
			top: 10px;
		}
		.location {
			position: relative;
			display: flex;
			align-items: center;
			float: right;
			width: auto;
			height: 38px;
			color: #fff;
			margin-top: 15px;
			.loca_info {
				position: relative;
				display: flex;
				align-items: center;
				height: 100%;
				cursor: pointer;
				.location_icon {
					display: inline-block;
					width: 20px;
					height: 20px;
					background-image: url(../../public/sprite.png);
					background-position: -215px -123px;
				}
				p {
					display: inline;
					margin-left: 8px;
				}
				.StarCity {
					position: absolute;
					top: 38px;
					left: 10px;
					cursor: default;
				}
			}
			a {
				margin-left: 8px;
				font-size: 0.9em;
				text-decoration: none;
				color: rgba(255,255,255,0.6);
				cursor: pointer;
			}
			.search_box {
				height: 30px;
				width: 275px;
				margin-left: 10px;
				padding-left: 10px;
				color: rgba(255,255,255,0.6);
				border: none;
				border-radius: 16px;
				background-color: rgba(255,255,255,0.2);
				outline: none;
			}
			.search_box::-webkit-input-placeholder {
				color: rgba(255,255,255,0.6);
			}
			.search_content {
				position: absolute;
				right: 4px;
				top: 40px;
				width: 275px;
				min-height: 200px;
				padding: 20px 0 20px 15px;
				padding-right: 0;
				background-color: #fff;
				color: #555;
				font-size: 14px;
				border-radius: 5px;
				box-sizing: border-box;
				li:hover {
					background-color: #eee;
				}
				p {
					color: #9f9f9f;
					padding-left: 5px;
					margin-bottom: 10px;
					font-size: 12px;
				}
				.container {
					position: relative;
					ul {
						li {
							float: left;
							padding: 0 5px;
							height: 16px;
							margin-right: 20px;
							margin-bottom: 10px;
							line-height: 16px;
							text-align: center;
							border-radius: 3px;
							cursor: pointer;
						}
					}
					.delete {
						position: absolute;
						top: 0;
						right: 24px;
						color: #868686;
						width: 45px;
						height: 20px;
						background-color: #f0f0f0;
						border-radius: 10px;
						text-align: center;
						font-size: 13px;
					}
				}
			}
			.search_result {
				position: absolute;
				right: 4px;
				top: 40px;
				width: 275px;
				min-height: 50px;
				padding: 10px 0 10px 20px;
				padding-right: 0;
				background-color: #fff;
				color: #aaa;
				font-size: 14px;
				border-radius: 5px;
				box-sizing: border-box;
				li {
					margin: 0 0 10px 0;
					cursor: pointer;
				}
			}
		}	
	}
	
</style>
